<template>
  <continer
    :showPage="showPage"
    :shadow="true"
    :pageshadow="true"
    :isNoTabs="true"
  >
    <template slot="search">
      <QuickSearch
        :advForm="quickSearchForm"
        @QuickSearch="handleSearchFun"
      ></QuickSearch>
    </template>
    <template slot="oprate">
      <el-button type="primary" size="mini" @click="handleSearchFun"
        >查询</el-button
      >
    </template>
    <template slot="content">
      <instiutionTable
        ref="tableRef"
        @currentChange="currentChangeFun"
        @sizeChange="sizeChange"
        :pages="spareTablePages"
        :instiutionTableData="spareTableData"
        :instiutionTableHeader="spareTableHeader"
      >
        <template #houseInfo="{ scope }">
          {{
            allHouseObj[scope.row.inWareHouseId] ?
             allHouseObj[scope.row.inWareHouseId].isDelete ? allHouseObj[scope.row.inWareHouseId].name + "(已删除)" : allHouseObj[scope.row.inWareHouseId].name
            : ''
          }}
        </template>
        <template #spareNumber="{ scope }">
          {{ allCommodityCodeObj[scope.row.spareId] ? allCommodityCodeObj[scope.row.spareId].spareNumber : '' }}
        </template>
        <template #spareName="{ scope }">
          {{ allCommodityCodeObj[scope.row.spareId] ? allCommodityCodeObj[scope.row.spareId].name : '' }}
        </template>
        <template #inTypeName="{ scope }">
          {{ allSpareInStockTypeObj[scope.row.inStockTypeId] ? allSpareInStockTypeObj[scope.row.inStockTypeId].typeName : '' }}
        </template>
      </instiutionTable>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import QuickSearch from '@/common/views/advancedSearch/QuickSearch.vue'
import continer from '@/common/views/configCommon/ui-modules/handle-wrapper.vue'
import instiutionTable from '@/common/views/institutionTable/institutionTable.vue'
import { commonAction } from '@/utils/common'
import { state, mutations } from '../store/spareData'
import { Store } from 'vuex/types'
@Component({
  name: 'InOutBoundRecord',
  components: {
    QuickSearch,
    continer,
    instiutionTable
  }
})
export default class Category extends Vue {
  private $message: any
  private $store: any
  private $router: any

  private showPage: boolean = false

  private spareTableData: any = [] // 表格数据

  private spareTableHeader: any[] = [
    { label: '备件编号', prop: 'spareNumber', custom: true },
    { label: '备件名称', prop: 'spareName', custom: true },
    { label: '入库类别', prop: 'inTypeName', custom: true },
    { label: '入库仓库', prop: 'houseInfo', custom: true, width: 150 },
    { label: '数量', prop: 'spareCount' },
    { label: '说明', prop: 'description', width: 150 },
    { label: '创建人', prop: 'creater' },
    { label: '创建时间', prop: 'createTime', width: 100 }
  ]

  private spareTablePages = { // 表格分页
    current: 1,
    pageSize: 10,
    total: 100
  }

  private outTypeOptions = [] // 出库类型数据

  private inTypeOptions = [] // 入库类型数据

  private houseOptions = [] // 仓库数据

  get userList () {
    return (this.$store as Store<any>).state.common.publicCache.userList || []
  }

  private quickSearchForm: any = {
    form: {
      spareNumber: '',
      spareName: '',
      type: 'rk',
      preNumber: undefined,
      afterNumber: undefined,
      ticketId: '',
      createUser: '',
      createTime: [],
      inStockTypeId: '',
      inWareHouseId: '',
      outStockTypeId: '',
      outWareHouseId: ''
    },
    advSearchOptions: [
      { label: '备件编号', inputType: 'input', placeholder: '请输入', name: 'spareNumber', clearable: true },
      { label: '备件名称', inputType: 'input', placeholder: '请输入', name: 'spareName', clearable: true },
      { label: '入库类别', inputType: 'select', clearable: true, selectData: state.spareInStockTypeList, name: 'inStockTypeId', defaultProp: { value: 'id', label: 'typeName' } },
      { label: '入库仓库', inputType: 'select', clearable: true, selectData: state.houseList, name: 'inWareHouseId', defaultProp: { value: 'id', label: 'name' } },
      { label: '数量', inputType: 'numberRange', placeholder: '请输入', preName: 'preNumber', afterName: 'afterNumber', clearable: true },
      { label: '创建人', inputType: 'select', clearable: true, selectData: this.userList, name: 'createUser', defaultProp: { label: 'agentName', value: '_id' } },
      { label: '创建时间', name: 'createTime', inputType: 'dateTimeRange', clearable: true }
    ]
  } // 快捷检索数据

  private currentChangeFun (page: number) { // 翻页
    this.spareTablePages.current = page
    this.getTableList()
  }

  private sizeChange (size: number) {
    this.spareTablePages.pageSize = size
    this.getTableList()
  }

  private handleSearchFun () { // 搜素
    this.spareTablePages.current = 1
    this.getTableList()
  }

  get allHouseObj () { // 仓库
    return state.allHouseObj
  }

  get allSpareInStockTypeObj () { // 入库类型
    return state.allSpareInStockTypeObj
  }

  get allSpareOutStockTypeObj () { // 出库类型
    return state.allSpareOutStockTypeObj
  }

  get allCommodityCodeObj () { // 备件类型
    return state.allCommodityCodeObj
  }

  private getName (id: any) { // 获取名称
    if (id === 'externalUser') {
      return '接口创建'
    }
    const agent = (this.$store as Store<any>).state.common.publicCache.userListObj[id]
    if (agent) {
      return agent && agent.name
    }
    return ''
  }

  private getTableList () { // 获取表格数据
    const { spareNumber, type, ticketId, createUser, preNumber, createTime, afterNumber, spareName, inStockTypeId, inWareHouseId, outStockTypeId, outWareHouseId } = this.quickSearchForm.form
    const sendData = {
      limit: this.spareTablePages.pageSize,
      page: this.spareTablePages.current,
      // billId,
      type,
      spareName,
      spareNumber,
      ticketId,
      inStockTypeId,
      inWareHouseId,
      outStockTypeId,
      outWareHouseId,
      countStart: preNumber,
      countEnd: afterNumber,
      createUser,
      createTimeStart: createTime && createTime[0],
      createTimeEnd: createTime && createTime[1]
    }
    commonAction({
      url: '/server-work/action/stockRecord/record',
      method: 'post',
      data: sendData
    }).then(res => {
      if (res.success) {
        const { list, count } = res.data
        list.forEach(item => {
          item.creater = this.getName(item.createUser)
        })
        this.spareTableData = list
        this.spareTablePages.total = count
      }
    })
  }

  private formateOptions (val) {
    if (val) {
      val.forEach(item => {
        if (item.children) {
          item.children = this.formateOptions(item.children)
        }
      })
      const arr = val.filter(item => item.isDelete === 0)
      if (arr.length) {
        return arr
      } else {
        return null
      }
    }
  }

  private activated () {
    if (this.isStoreEmpty) {
      commonAction({
        url: '/server-work/action/spareConfig/list',
        method: 'get'
      }).then(res => {
        if (res.success) {
          mutations.setStateData('arr', 'spareTypeList', this.formateOptions(res.data.spareTypeList) || [])
          mutations.setStateData('arr', 'spareOutStockTypeList', res.data.spareOutStockTypeList)
          mutations.setStateData('arr', 'spareInStockTypeList', res.data.spareInStockTypeList)
          mutations.setStateData('arr', 'unitList', res.data.unitConfig)
          this.quickSearchForm.advSearchOptions[2].selectData = state.spareInStockTypeList
        }
      })
    } else {
      this.quickSearchForm.advSearchOptions[2].selectData = state.spareInStockTypeList
    }
    if (!state.houseRequestDone) {
      commonAction({
        url: '/server-work/action/wareHouse/query',
        method: 'post',
        data: { isIncludeDel: false }
      }).then(res => {
        if (res.success) {
          mutations.setStateData('arr', 'houseList', res.data.wareHouseItemList)
          this.quickSearchForm.advSearchOptions[3].selectData = state.houseList
        }
      })
    } else {
      this.quickSearchForm.advSearchOptions[3].selectData = state.houseList
    }
  }

  private get isStoreEmpty () {
    return state.spareTypeList.length === 0 || state.spareOutStockTypeList.length === 0 || state.spareInStockTypeList.length === 0 || state.unitList.length === 0
  }

  private mounted () {
    this.getTableList()
  }
}
</script>
<style lang="stylus" scoped>
>>> .el-input-number
  .el-input__inner
    text-align left
</style>
